<template>
  <div>
    <!--Hotcities热门城市-->
    <div class="city-hot">
      <div class="hot-title">热门城市</div>
      <ul class="hot-list" >
        <li v-for="(item,index) in hotCities" :key="index" @click="changeCityName(item.name)">
        {{item.name}}
        </li>
      </ul>
    </div>
    <!-- Sort-->
    <div class="city-sort">
      <div class="sort-title">字母排序</div>
      <ul class="sort-list">
        <li v-for="(item , index) in city">
          {{item.initial}}
        </li>
      </ul>
    </div>
    <!-- List-->
     <div class="city-list">
        <template v-for="(item,index) in city">
          <div class="list-title">
            {{item.initial}}
          </div>
          <ol class="list-item">
            <li v-for="(num,index) in item.list" :key='index'>
              {{num.name}}
            </li>
          </ol>
        </template>
      </div>
  </div>

</template>

<script>
  import {mapMutations} from 'vuex'
  export default{
    props:['city','hotCities'],
    methods:{
      //当点击changeCityName 1.获取当前被点击的li标签的城市名；2、跳转到首页
      //3.绑定Vuex的Mutations事件之间
      changeCityName(cityName){
        this.changeCity(cityName);
        this.$router.push('/')
      },
      //调用vuex内Mutations里面的函数 changeCity
      ...mapMutations(['changeCity'])
    }
  }
</script>

<style scoped>
  /* Hotcities*/
  .city-hot{
    width: 100%;
    font-size: 0.28rem;
  }
  .hot-title{
    padding:0.2rem 0.3rem;
  }
  .hot-list{
    background-color: white;
    color: #212121;
    position: relative;
    overflow: hidden;
  }
  .hot-list:before{
    content: "";
    position: absolute;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 33.333%;
    height: 100%;
    left: 33.333%;
  }
  .hot-list li{
    width: 33.333%;
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    float: left;
    border-bottom:1px solid #ddd;
  }
  /* Sort*/
  .city-sort{
    width: 100%;
    font-size: 0.28rem;
  }
  .sort-title{
    padding:0.2rem 0.3rem;
  }
  .sort-list{
    background-color: white;
    color: #212121;
    position: relative;
    overflow: hidden;
  }
  .sort-list li{
    width: 16.666%;
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    float: left;
  }
  /* List*/
  .city-list{
    width: 100%;
    font-size: 0.28rem;
  }
  .list-title{
    padding: 0.2rem 0.3rem;
  }
  .list-item{
    background-color: white;
    color: #212121;
    position: relative;
    overflow: hidden;
  }
  .list-item:before{
    content: "";
    position: absolute;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 25%;
    height: 100%;
    left: 25%;
  }
  .list-item:after{
    content: "";
    position: absolute;
    border-right: 1px solid #ddd;
    width: 0%; /* 解决第二列不可点击的效果*/
    height: 100%;
    right: 25%;
  }
  .list-item li{
    width: 25%;
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    float: left;
    border-bottom:1px solid #ddd;
    position: relative; /* 解决第二列不可点击的效果*/
  }
</style>
